<template>
	<div class="appEdit">
		<el-dialog :title="(state.formData.id === 0 ? '添加' : '修改') + '组织'" v-model="state.isShowDialog" width="560px">
			<el-form ref="formRef" :model="state.formData" :rules="state.rules" size="default" label-width="90">
				<el-form-item label="省市区域" prop="selectRegion">
					<el-cascader v-model="state.formData.selectRegion" :options="state.options" style="width: 100%" />
				</el-form-item>

				<el-form-item label="组织名" prop="name">
					<el-input v-model="state.formData.name" placeholder="组织名" clearable></el-input>
				</el-form-item>

				<el-form-item label="通信地址" prop="url">
					<el-input v-model="state.formData.url" controls-position="right" placeholder="通信地址" />
				</el-form-item>

				<el-form-item label="rtmp地址" prop="mediaUrl">
					<el-input v-model="state.formData.mediaUrl" placeholder="rtmp地址" />
				</el-form-item>

				<el-form-item label="前端地址" prop="webUrl">
					<el-input v-model="state.formData.webUrl" :rows="4" placeholder="前端地址" maxlength="255" />
				</el-form-item>

				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="state.formData.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default" :loading="state.loading">{{
						state.formData.id === 0 ? '新 增' : '修 改'
					}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="orgEdit">
import { reactive, ref, unref, defineProps, defineExpose } from 'vue';
import { add, update } from '/@/api/hm/org';
import { ElMessage } from 'element-plus';
import { provinceAndCityData, codeToText } from 'element-china-area-data';

const props = defineProps({
	editType: {
		type: String,
		default: 'edit',
	},
});

const emit = defineEmits(['success']);

const formRef = ref<HTMLElement | null>(null);
const state = reactive({
	options: provinceAndCityData,
	loading: false,
	isShowDialog: false,

	formData: {
		id: 0,
		selectRegion: <any>[],
		name: '',
		url: '',
		mediaUrl: '',
		webUrl: '',
		status: 1,
	},

	// 表单校验
	rules: {
		selectRegion: [{ required: true, message: '区域不能为空', trigger: 'blur' }],
		name: [{ required: true, message: '组织不能为空', trigger: 'blur' }],
		url: [{ required: true, message: '通信地址不能为空', trigger: 'blur' }],
		mediaUrl: [{ required: true, message: 'Websocket不能为空', trigger: 'blur' }],
		webUrl: [{ required: true, message: '前端地址不能为空', trigger: 'blur' }],
		status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
	},
});

// 打开弹窗
const openDialog = (row?: any) => {
	resetForm();
	if (row) {
		state.formData.id = row.id;
		state.formData.selectRegion = [row.provinceCode, row.cityCode];
		state.formData.name = row.name;
		state.formData.url = row.url;
		state.formData.mediaUrl = row.mediaUrl;
		state.formData.webUrl = row.webUrl;
		state.formData.status = row.status;
	}
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 新增
const onSubmit = () => {
	const formWrap = unref(formRef) as any;
	if (!formWrap) return;

	formWrap.validate((valid: boolean) => {
		if (valid) {
			let postData = JSON.parse(JSON.stringify(state.formData));
			postData.provinceCode = postData.selectRegion[0];
			postData.cityCode = postData.selectRegion[1];
			postData.areaCode = postData.selectRegion[2];
			postData.provinceName = codeToText[postData.selectRegion[0]];
			postData.cityName = codeToText[postData.selectRegion[1]];
			postData.areaName = codeToText[postData.selectRegion[2]];

			delete postData.selectRegion;

			state.loading = true;

			if (state.formData.id === 0) {
				//添加
				add(postData)
					.then(() => {
						ElMessage.success('新版本添加成功');
						closeDialog(); // 关闭弹窗
						emit('success');
					})
					.finally(() => {
						state.loading = false;
					});
			} else {
				//修改
				update(postData)
					.then(() => {
						ElMessage.success('版本修改成功');
						closeDialog(); // 关闭弹窗
						emit('success');
					})
					.finally(() => {
						state.loading = false;
					});
			}
		}
	});
};

const resetForm = () => {
	state.formData = {
		id: 0,
		selectRegion: [],
		name: '',
		url: '',
		mediaUrl: '',
		webUrl: '',
		status: 1,
	};
};

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
